import React, { memo, useState } from "react";
import { Form, Input,Button,Tabs  } from "antd";
import {checkUser,registerUser} from "../request/user"
import {useNavigate} from "react-router-dom"
const Login = memo(() => {
  const navigate = useNavigate()
  const [activeKey,setActiveKey] = useState("1")
  const [registerForm] = Form.useForm()
  const onFinish =async (values)=>{
    let res = await checkUser(values)
    if(res.success){
      localStorage.setItem("token",res.data.token)
      navigate("/home")
    }
  }
  const onFinish1 =async (values)=>{
    console.log(values)
    let res = await registerUser(values)
    if(res.success){
      console.log(res.msg);
      registerForm.resetFields()
      setActiveKey("1")
    }
  }
  const items = [
    {
      key: '1',
      label: '登录',
      children:  <Form
      name="login"
      onFinish={onFinish}
      autoComplete="off"
    >
      <Form.Item
        label="账号"
        name="username"
        rules={[
          {
            required: true,
            message: "账号不能为空",
          },
          {
            pattern:/^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
            message:"手机号格式错误"
          }
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="密码"
        name="password"
        rules={[
          {
            required: true,
            message: "密码不能为空",
          },
          {
            type:"string",
            min:3,
            message:"最少为三个字符",
          },
          {
            pattern:/^\d+$/,
            message:"密码格式错误"
          }
        ]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item
        wrapperCol={{
          offset: 10,
          span: 16,
        }}
      >
        <Button type="primary" htmlType="submit">
          登录
        </Button>
      </Form.Item>
    </Form>,
    },
    {
      key: '2',
      label: '注册',
      children:  <Form
      name="register"
      onFinish={onFinish1}
      autoComplete="off"
      form={registerForm}
    >
      <Form.Item
        label="账号"
        name="username"
        rules={[
          {
            required: true,
            message: "账号不能为空",
          },
          {
            pattern:/^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
            message:"手机号格式错误"
          }
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="密码"
        name="password"
        rules={[
          {
            required: true,
            message: "密码不能为空",
          },
          {
            type:"string",
            min:3,
            message:"最少为三个字符",
          },
          {
            pattern:/^\d+$/,
            message:"密码格式错误"
          }
        ]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item
        wrapperCol={{
          offset: 10,
          span: 16,
        }}
      >
        <Button type="primary" htmlType="submit">
          注册
        </Button>
      </Form.Item>
    </Form>,
    },
  ];
  return (
    <div>
      <div className="mask">
        <Tabs activeKey={activeKey} items={items} onChange={(v)=>setActiveKey(v)} />
      </div>
    </div>
  );
});

export default Login;
